import Taro, { Component } from '@tarojs/taro'
import { observer, inject } from '@tarojs/mobx'

import { View, Form, Text, Input, Label, RadioGroup, Radio, Button, Image, Picker, Textarea } from '@tarojs/components'

import './form.scss'
import { upload } from './services/form.service'

@inject('formStore')
@observer
class User extends Component {

    componentWillMount() { }

    componentWillReact() {
    }

    componentDidMount() { }

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    formSubmit = e => {
        const { formStore } = this.props;
        // if (formStore.valid(e)) return Taro.showToast({
        //     title: '必要项未填',
        //     icon: 'none',
        //     duration: 3000
        // });
        let params = {
            baseInfo: e.detail.value,
            education: formStore.education.slice(),
            workHistory: formStore.workHistory.slice(),
            trainHistory: formStore.trainHistory.slice(),
            level: formStore.level
        };
        upload(params).then(result => {
            console.log(result);
        }).catch(err => {
            console.log(err);
        });
    }
    formReset = e => {
        console.log(this.props);

        console.log(e)
    }
    onDateChange = e => {
        const { formStore } = this.props;
        formStore.onDateChange(e.detail.value);
    }
    // 修改工作经历
    onWorkHistoryDateChange = (i, isBeginTime, e) => {
        const { formStore } = this.props;
        formStore.onWorkHistoryDateChange(i, isBeginTime, e);
    }

    addOrDeleteWorkHistory(isAdd) {
        const { formStore } = this.props;
        formStore.addOrDeleteWorkHistory(isAdd);
    }

    //修改教育经历
    onEducationHistoryDateChange = (i, isBeginTime, e) => {
        const { formStore } = this.props;
        formStore.onEducationHistoryDateChange(i, isBeginTime, e);
    }
    addOrDeleteEducationList(isAdd) {
        const { formStore } = this.props;
        formStore.addOrDeleteEducationList(isAdd);
    }

    //修改培训经历
    onTrainHistoryDateChange = (i, e) => {
        const { formStore } = this.props;
        formStore.onTrainHistoryDateChange(i, e);
    }
    addOrDeleteTrainList(isAdd) {
        const { formStore } = this.props;
        formStore.addOrDeleteTrainList(isAdd);
    }

    onLevelChange(e) {
        const { formStore } = this.props;
        formStore.onLevelChange(e);
    }

    render() {
        const { formStore: { list, list1, list2, dateSel, workHistory, education, trainHistory, levelList, level } } = this.props;
        return (
            <View className='user'>
                <View class='title'>应聘者（员工）信息登记表</View>
                <Form onSubmit={this.formSubmit.bind(this)} onReset={this.formReset.bind(this)} >
                    <Label>
                        <Text className='input-name'><Text className='required'>*</Text>姓名</Text>
                        <Input type='text' name='name' placeholder='姓名' />
                    </Label>

                    <RadioGroup name='sex'>
                        <Label className='radio-list__label' >
                            <Text className='input-name'>性别</Text>
                            {list.map((item, i) => {
                                return (
                                    <Radio color='#01a0ff' className='radio-list__radio' for={i} key={i} value={item.value} checked={item.checked}>{item.text}</Radio>
                                )
                            })}
                        </Label>

                    </RadioGroup>
                    <Label>
                        <Picker mode='date' onChange={this.onDateChange}>
                            <View className='picker'>
                                <Text className='required'>*</Text>出生日期：{dateSel}
                            </View>
                        </Picker>
                    </Label>
                    <Label>
                        <Text className='input-name'>籍贯</Text>
                        <Input type='text' name='birthplace' placeholder='籍贯' />
                    </Label>
                    <Label>
                        <Text className='input-name'><Text className='required'>*</Text>联系方式</Text>
                        <Input type='text' name='phone' placeholder='联系方式' />
                    </Label>

                    <Label>
                        <Text className='input-name'><Text className='required'>*</Text>邮箱</Text>
                        <Input type='text' name='mail' placeholder='邮箱' />
                    </Label>
                    <Label>
                        <Text className='input-name'>身份证号码</Text>
                        <Input type='text' name='id' placeholder='身份证号码' />
                    </Label>
                    <Label>
                        <Text className='input-name'><Text className='required'>*</Text>工作年限</Text>
                        <Input type='text' name='workYear' placeholder='工作年限' />
                    </Label>

                    <Label>
                        <Picker mode='selector' range={levelList} onChange={this.onLevelChange} className='post'>
                            <View className='post-picker'>
                                <Text className='required'>*</Text>岗位：{level}
                            </View>
                        </Picker>
                    </Label>
                    <RadioGroup name='socialCard'>
                        <Label className='radio-list__label' >
                            <Text className='input-name'>社保卡</Text>
                            {list1.map((item, i) => {
                                return (
                                    <Radio color='#01a0ff' className='radio-list__radio' for={i} key={i} value={item.value} checked={item.checked}>{item.text}</Radio>
                                )
                            })}
                        </Label>
                    </RadioGroup>

                    <RadioGroup name='providentFund'>
                        <Label className='radio-list__label' >
                            <Text className='input-name'>公积金</Text>
                            {list2.map((item, i) => {
                                return (
                                    <Radio color='#01a0ff' className='radio-list__radio' for={i} key={i} value={item.value} checked={item.checked}>{item.text}</Radio>
                                )
                            })}
                        </Label>
                    </RadioGroup>

                    <Label>
                        <Text className='input-name'>目前居住地址</Text>
                        <Textarea type='text' name='liveAdd'  placeholder='目前居住地址' autoHeight></Textarea>
                        {/* <Input type='text' name='liveAdd' placeholder='目前居住地址' /> */}
                    </Label>


                    <Label>
                        <Text className='input-name'><Text className='required'>*</Text>紧急联系人电话</Text>
                        <Input type='text' name='familyphoneNumber' placeholder='紧急联系人电话' />
                    </Label>
                    <Label>
                        <Text className='input-name'><Text className='required'>*</Text>目前薪资（月）</Text>
                        <Input type='text' name='currentSalary' placeholder='目前薪资' />
                    </Label>
                    <Label>
                        <Text className='input-name'>期望薪资（月）</Text>
                        <Input type='text' name='expectedSalary' placeholder='期望薪资' />
                    </Label>



                    {/* 工作经历 */}

                    <View class='work-history'>
                        <View class='work-history-title'>工作经历（共{workHistory.slice().length}条）：
                            {workHistory.slice().length > 0 ? <View class='add' onClick={this.addOrDeleteWorkHistory.bind(this, false)}><Text class='add-icon'>-</Text>删除</View> : null}
                            <View class='add' onClick={this.addOrDeleteWorkHistory.bind(this, true)} ><Text class='add-icon'>+</Text>添加</View>
                        </View>
                        {
                            workHistory.slice().map((item, i) => {
                                return (
                                    <View key={item.num} class='work-history-list'>
                                        <Picker mode='date' onChange={this.onWorkHistoryDateChange.bind(this, i, true)}>
                                            <View className='picker'>
                                                <Text className='required'>*</Text>开始时间：{item.beginTime}
                                            </View>
                                        </Picker>
                                        <Picker mode='date' onChange={this.onWorkHistoryDateChange.bind(this, i, false)}>
                                            <View className='picker'>
                                                <Text className='required'>*</Text>结束时间：{item.finishTime}
                                            </View>
                                        </Picker>
                                        <Label>
                                            <Text className='input-name'>部门</Text>
                                            <Input type='text' placeholder={item.dept} onInput={input => {
                                                workHistory[i].dept = input.detail.value;
                                            }}
                                            />
                                        </Label>
                                        <Label>
                                            <Text className='input-name'>任职单位</Text>
                                            <Input type='text' placeholder={item.company} onInput={input => {
                                                workHistory[i].company = input.detail.value;
                                            }}
                                            />
                                        </Label>
                                        <Label>
                                            <Text className='input-name'>薪资水平</Text>
                                            <Input type='text' placeholder={item.money} onInput={input => {
                                                workHistory[i].money = input.detail.value;
                                            }}
                                            />
                                        </Label>
                                        <Label>
                                            <Text className='input-name'>离职原因</Text>
                                            <Input type='text' placeholder={item.season} onInput={input => {
                                                workHistory[i].season = input.detail.value;
                                            }}
                                            />
                                        </Label>
                                        <Label>
                                            <Text className='input-name'>上级姓名与电话</Text>
                                            <Input type='text' placeholder={item.num} onInput={input => {
                                                workHistory[i].num = input.detail.value;
                                            }}
                                            />
                                        </Label>
                                    </View>
                                )
                            })
                        }
                    </View>
                    {/* 教育经历 */}

                    <View class='work-history'>
                        <View class='work-history-title'>教育经历（共{education.slice().length}条）：
                            {education.slice().length > 0 ? <View class='add' onClick={this.addOrDeleteEducationList.bind(this, false)}><Text class='add-icon'>-</Text>删除</View> : null}
                            <View class='add' onClick={this.addOrDeleteEducationList.bind(this, true)} ><Text class='add-icon'>+</Text>添加</View>
                        </View>
                        {
                            education.slice().map((item, i) => {
                                return (
                                    <View key={item.num} class='work-history-list'>
                                        <Picker mode='date' onChange={this.onEducationHistoryDateChange.bind(this, i, true)}>
                                            <View className='picker'>
                                                <Text className='required'>*</Text>开始时间：{item.beginTime}
                                            </View>
                                        </Picker>
                                        <Picker mode='date' onChange={this.onEducationHistoryDateChange.bind(this, i, false)}>
                                            <View className='picker'>
                                                <Text className='required'>*</Text>结束时间：{item.finishTime}
                                            </View>
                                        </Picker>
                                        <Label>
                                            <Text className='input-name'>学校</Text>
                                            <Input type='text' placeholder={item.school} onInput={input => {
                                                education[i].school = input.detail.value;
                                            }}
                                            />
                                        </Label>
                                        <Label>
                                            <Text className='input-name'>专业</Text>
                                            <Input type='text' placeholder={item.profession} onInput={input => {
                                                education[i].profession = input.detail.value;
                                            }}
                                            />
                                        </Label>
                                        <Label>
                                            <Text className='input-name'>学历</Text>
                                            <Input type='text' placeholder={item.level} onInput={input => {
                                                education[i].level = input.detail.value;
                                            }}
                                            />
                                        </Label>
                                    </View>
                                )
                            })
                        }
                    </View>
                    {/* 培训经历 */}
                    <View class='work-history'>
                        <View class='work-history-title'>培训经历（共{trainHistory.slice().length}条）：
                            {trainHistory.slice().length > 0 ? <View class='add' onClick={this.addOrDeleteTrainList.bind(this, false)}><Text class='add-icon'>-</Text>删除</View> : null}
                            <View class='add' onClick={this.addOrDeleteTrainList.bind(this, true)} ><Text class='add-icon'>+</Text>添加</View>
                        </View>
                        {
                            trainHistory.slice().map((item, i) => {
                                return (
                                    <View key={item.num} class='work-history-list'>
                                        <Picker mode='date' onChange={this.onTrainHistoryDateChange.bind(this, i, true)}>
                                            <View className='picker'>
                                                <Text className='required'>*</Text>授予时间{item.beginTime}
                                            </View>
                                        </Picker>
                                        <Label>
                                            <Text className='input-name'>职位/技能名称</Text>
                                            <Input type='text' placeholder={item.skill} onInput={input => {
                                                education[i].skill = input.detail.value;
                                            }}
                                            />
                                        </Label>
                                        <Label>
                                            <Text className='input-name'>职称/技能等级</Text>
                                            <Input type='text' placeholder={item.level} onInput={input => {
                                                education[i].level = input.detail.value;
                                            }}
                                            />
                                        </Label>
                                        <Label>
                                            <Text className='input-name'>证书编号</Text>
                                            <Input type='text' placeholder={item.code} onInput={input => {
                                                education[i].code = input.detail.value;
                                            }}
                                            />
                                        </Label>
                                    </View>
                                )
                            })
                        }
                    </View>
                    <View className='button-list'>
                        <Button formType='submit'>提交</Button>
                        <Button formType='reset'>重置</Button>
                    </View>

                </Form>


                <View class='huiwen-bg'>
                    <Image className='huiwen' src='http://www.qinhanwen.xyz/huiwen1.png' />
                    <Image className='talk' src='http://www.qinhanwen.xyz/talk.png' />
                    <View className='warn'>
                        小火鸡，要根据自身真实情况填表哟~~
                    </View>
                </View>
            </View >
        )
    }
}

export default User 
